<template>
  <div class="container">
    <div class="video">
      <img :src="videoSrc" alt="video" style="height: 100%; width: auto">
    </div>
    <div class="table">
      <el-button type="default" @click="updateData()">Update table</el-button>
      <el-table :data="tableData" style="width: 100%; border-radius: 20px; padding: 0 10px 10px 10px;opacity: 1; margin-top: 3%" height="615">
        <el-table-column fixed prop="intrusion_time" label="Date" width="180"/>
        <el-table-column prop="uid" label="UserID" width="120"/>
        <el-table-column prop="count" label="People num" width="120"/>
        <el-table-column prop="path" label="Path" width="400"/>
        <el-table-column fixed="right" label="View" width="65">
          <template #default="scope">
            <el-button link type="primary" size="large" @click="showPic(scope.row.path)">View</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
  <el-dialog v-model="dialogVisible" width="40%">
    <img :src="imgSrc" alt="">
  </el-dialog>
</template>

<script>
import request from "@/utils/request";


export default {
  name: "Page1",
  data() {
    return {
      videoSrc: "http://127.0.0.1:8000/recognition/object_recognition/"+sessionStorage.getItem('id')+'/',
      dialogVisible: false,
      imgSrc: '',
      tableData: []
    }
  },
  mounted() {
    request.get("/recognition/intrusion_record/"+sessionStorage.getItem('id')+'/').then(res=>{
      const fieldsList = res.map((item) => item.fields);
      this.tableData = fieldsList
    })
  },
  methods: {
    showPic(url) {
      this.imgSrc = "http://127.0.0.1:8000/recognition/intrusion_image/?image_url="+encodeURIComponent(url)
      this.dialogVisible = true
    },
    updateData(){
      request.get("/recognition/intrusion_record/"+sessionStorage.getItem('id')+'/').then(res=>{
        const fieldsList = res.map((item) => item.fields);
        this.tableData = fieldsList
        this.$message({
          type:"success",
          message:"Success!"
        })
      })
    }
  }
}
</script>

<style scoped>
.container {
  width: 100%;
  height: 100%;
  display: flex;
  flex-wrap: wrap;
}

.video {
  height: 80%;
  width: 55%;
  background-color: rgba(0, 0, 0, 0.2);
  border-radius: 20px;
  display: flex;
  /*justify-content: center;*/
  /*align-items: center;*/
  flex-wrap: wrap;
  margin: 5%;
  padding: 2%;
  align-items: center;
  justify-content: center;
}

.table {
  margin-top: 2%;
  height: 88.7%;
  width: 35%;
}
</style>